<template>
  <div :class="real_them">
    <MenuVue />
    <div class="main">
      <div @click="closeLogin" class="blog_context">
        <!-- 内容 -->
        <div class="article">
          <!-- 标题，标签 -->
          <div class="headers">
            <h1 class="article-title">{{ this.$route.query.title }}</h1>
          </div>
          <!-- 标题下方作者，发布时间 -->
          <div class="author-info-block">
            <div
              style="
                height: 50px;
                width: 50px;
                overflow: hidden;
                border-radius: 50%;
                margin-right: 10px;
              "
            >
              <img
                loading="eager"
                :src="this.$route.query.icon"
                style="height: 100%"
                alt="头像"
              />
            </div>
            <div class="author-info-box">
              <div class="author-name">
                <span class="name" style="max-width: 128px">{{
                  this.$route.query.author
                }}</span>
              </div>
              <div class="meta-box">
                <time class="time">
                  {{ this.$route.query.date }}
                </time>
              </div>
            </div>
            <!-- <button class="follow-button follow">
              <span class="text">关注</span>
            </button> -->
          </div>
          <!-- 正文 -->
          <div class="markdown-body">
            {{ this.$route.query.introduce }}
          </div>
          <!-- 点赞评论 -->
          <div class="tag">
            <TagVue
              v-for="(i, index) of tag"
              :key="index"
              :name="i[0]"
              :color="i[1]"
            />
          </div>
          <div class="action-box action-bar">
            <!-- <div class="praise-action action"> -->
            <div @click="addLike" :class="likeclass">
              <div class="action-title-box">
                <i class="el-icon-thumb"></i>
                <span class="action-title">{{ like }}</span>
              </div>
            </div>

            <div class="comment-action action">
              <div @click="ifReply = !ifReply" :class="commentclass">
                <i class="el-icon-chat-dot-square"></i>
                <span class="action-title"
                  >{{ ifReply ? "取消回复" : this.$route.query.comment }}
                </span>
              </div>
            </div>
          </div>
          <div v-if="ifReply" class="reply">
            <el-input
              type="textarea"
              class="inner"
              placeholder="请输入内容"
              v-model="textarea"
              maxlength="100"
              show-word-limit
            >
            </el-input>
            <div @click="sendComment" class="btn">发布评论</div>
          </div>
        </div>
        <commentVue
          v-for="(i, index) in this.$route.query.comments"
          :key="index"
          :allcomment="i"
        />
      </div>
      <Form />
    </div>
  </div>
</template>

<script>
import TagVue from "../re_components/Tag.vue";
import MenuVue from "../components/Menu.vue";
import commentVue from "../re_components/comment.vue";
import Form from "../re_components/Form.vue";
import addDynamicLike from "../api/addDynamicLike.js";
import addDynamicComment from "../api/addCommentDynamic.js";
export default {
  name: "Dynamic_detailin",
  components: { TagVue, commentVue, MenuVue, Form },
  data() {
    return {
      them: "contain",
      textarea: "",
      ifReply: false,
      allReadyLike: false,
      allReadycollect: false,
      rlike: 0,
    };
  },
  computed: {
    commentclass() {
      let click = this.ifReply ? " click" : "";
      return `action-title-box${click}`;
    },
    tag() {
      let arr = this.$route.query.tag;
      return arr;
    },
    real_them() {
      let k = this.$store.state.skin;
      let m = k == true ? "light" : "dark";
      return this.them + " " + m;
    },
    likeclass() {
      //点赞高亮
      let click = this.allReadyLike ? " click" : "";
      return `action${click}`;
    },
    like() {
      return this.rlike;
    },
  },
  mounted() {
    let userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    if (userinfo) {
      this.$store.commit("tologin", true);
      this.$store.commit("addInfomation", userinfo);
      // 在这里进行用户判断，是否是该用户点赞过
      if (
        this.$route.query.likeusers &&
        JSON.parse(JSON.parse(this.$route.query.likeusers)).indexOf(userinfo)
      )
        this.allReadyLike = true;
    }
    this.rlike = this.$route.query.like;
  },
  methods: {
    closeLogin() {
      this.$store.commit("changeshow", false);
    },
    addLike() {
      if (!this.$store.state.islogin) {
        this.$message({
          message: "请先登录",
          type: "warning",
        });
        return;
      }
      this.allReadyLike = !this.allReadyLike;
      let params = new URLSearchParams();
      params.append("id", this.$route.query.id);
      params.append("userid", this.$store.state.infomation.id);
      console.log(this.$route.query.id)
      addDynamicLike(params).then((res) => {
        if (this.allReadyLike) this.rlike++;
        else this.rlike--;
        console.log(res)
      });
    },
    sendComment() {
      if (!this.$store.state.islogin) {
        this.$message({
          message: "请先登录",
          type: "warning",
        });
        return;
      }

      let params = new URLSearchParams();
      params.append("id", this.$route.query.id);
      params.append("userid", this.$store.state.infomation.id);
      params.append("context", this.textarea);
      addDynamicComment(params).then((res) => {
        console.log(res);
        this.ifReply = false;
        this.$message({
          message: "成功回复，下次进入页面时显示最新数据",
          type: "success",
        });
      });
    },
  },
  watch: {
    id: {
      handler() {
        this.allReadyLike = false;
        this.allReadycollect = false;
        this.ifReply = false;
        console.log(this.$store.state.infomation.id);
        // let arr = JSON.parse(this.$store.state.nowblog.likeusers)
        // console.log(arr);
        // if (arr !==null) {
        //   for (let i = 0; i <arr.length; i++) {
        //   if(arr[i] ==  this.$store.state.infomation.id){
        //     this.allReadyLike= true
        //   }
        // }
        // }
      },
    },
  },
};
</script>

<style lang="less" scoped>
@import "../main.less";

.light {
  background-color: @bg_gray;
  transition: all 1s;

  .follow-button {
    background: @bt_deep_light;
    transition: all 1s;
  }

  .author-info-block .author-name .username {
    color: @fs_light_contain;
    transition: all 1s;
  }

  .menu {
    background-color: @bg_light_contain;
    color: @fs_light_contain;
    transition: all 1s;
  }

  .reply /deep/ .el-textarea__inner {
    background-color: @bg_light_contain;
    transition: all 1s;
  }
  .reply /deep/ .el-input__count {
    background-color: @bg_light_contain;
    transition: all 1s;
  }

  .main {
    .blog_list {
      background-color: @bg_light_contain;
      color: @fs_light_contain;
      transition: all 1s;
    }

    .blog_context {
      background-color: @bg_light_contain;
      color: @fs_light_contain;
      transition: all 1s;
    }

    .blog_tools {
      background-color: @bg_light_contain;
      color: @fs_light_contain;
      transition: all 1s;
    }
  }
}

.dark {
  background-color: @bg_dark;
  transition: all 1s;
  .reply /deep/ .el-textarea__inner {
    background-color: @bg_dark;
    transition: all 1s;
  }
  .reply /deep/ .el-input__count {
    background-color: @bg_dark;
    transition: all 1s;
  }
  .follow-button {
    background: @bt_deep_dark;
    transition: all 1s;
  }

  .author-info-block .author-name .username {
    color: @fs_dark_contain;
    transition: all 1s;
  }

  .menu {
    background-color: @bg_dark_contain;
    color: @fs_dark_contain;
    transition: all 1s;
  }

  .main {
    .blog_list {
      background-color: @bg_dark_contain;
      color: @fs_dark_contain;
      transition: all 1s;
    }

    .blog_context {
      background-color: @bg_dark_contain;
      color: @fs_dark_contain;
      transition: all 1s;
    }

    .blog_tools {
      background-color: @bg_dark_contain;
      color: @fs_dark_contain;
      transition: all 1s;
    }
  }
}

.contain {
  // 博客是单屏页面
  height: 100%;
  width: 100%;
  position: relative;

  .main {
    position: absolute;
    bottom: 0;
    height: 90%;
    width: 100%;
    overflow: auto;
  }
}

@media screen and (min-width: 1300px) {
  /* 大于1200px时 */
  .contain {
    .main {
      display: flex;
      justify-content: center;
      align-items: center;

      .blog_context {
        width: 1200px;
        height: 100%;
        margin-left: 16px;
      }
    }
  }
}

@media screen and (min-width: 800px) and (max-width: 1300px) {
  /* 小于800px时 */

  .contain {
    .main {
      display: flex;
      justify-content: center;
      align-items: center;

      .blog_context {
        width: 950px;
        height: 100%;
        margin-left: 16px;
        margin-right: 16px;
      }
    }
  }
}

@media screen and (max-width: 800px) {
  /* 小于800px时 */

  .contain {
    .main {
      display: flex;
      justify-content: center;
      align-items: center;

      .blog_context {
        flex-grow: 1;
        height: 100%;
        margin-left: 16px;
        margin-right: 16px;
      }
    }
  }
}

.action {
  margin-right: 0%;
  justify-content: end;
  display: flex;
  align-items: center;
  width: 50%;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.action-bar {
  position: absolute;
  z-index: 100;
  // bottom: 0;
  width: 25%;
  right: 0;
  margin-right: 5%;
  padding: 2%;
}

.action-bar {
  display: flex;
}

.article {
  position: relative;
  padding: 3rem;
  z-index: 1;
}

.action-title-box .action-title {
  margin-left: 0.3em;
}

.headers {
  display: flex;
  align-items: center;
}

.tag {
  position: absolute;
  z-index: 100;
  // bottom: 0;
  padding: 2%;
  font-size: 1rem;
  display: flex;
  align-items: center;
}

.article-title {
  width: 80%;
  margin: 0 0 1.667rem;
  font-size: 2rem;
  line-height: 1.31;
}

.meta-box {
  font-size: 1rem;
  color: #8a919f;
  margin-top: 2px;
  line-height: 22px;
}

.author-info-block {
  display: flex;
  align-items: center;
}

.author-info-block .avatar {
  flex: 0 0 auto;
  margin-right: 1rem;
  width: 3.333rem;
  height: 3.333rem;
  border-radius: 50%;
}

.author-info-block .author-info-box {
  min-width: 0;
  flex-grow: 1;
  flex: 1;
  min-height: 43px;
}

.author-info-block .author-name {
  height: 2rem;
}

.author-info-block .author-name .username {
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
  line-height: 2rem;
}

.follow-button {
  margin: 0 0 0 auto;
  padding: 0 1rem;
  height: 34px;
  font-size: 14px;
  color: white;
  border: 1px solid rgba(30, 128, 255, 0.3);
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.markdown-body {
  padding: 5%;
}

.click {
  color: @fs_btn_color;
}

.reply .btn {
  cursor: pointer;
  margin: 5px 0;
  height: 35px;
  width: 80px;
  border-radius: 4px;
  border: 1px solid #1e80ff;
  background-color: rgba(30, 128, 255, 0.05);
  color: #007fff;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.reply {
  width: 95%;
  margin: auto;
  padding-left: 30px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  margin-top: 60px;
}
</style>